<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>form</title>
	<style>
		#app {
			width: 800px;
			border: 1px solid black;
			margin: 100px 100px;
			padding: 20px;
		}
	</style>
</head>
<body>
<button id="start">打开</button>

<script src="../resource/layui-v2.2.3/layui/layui.all.js"></script>
<link rel="stylesheet" href="../resource/layui-v2.2.3/layui/css/layui.css">
<script>
  var elementsById = document.getElementById('start')
  elementsById.onclick = function () {
    layer.open({
      title: '登录',
      type: 1,
      content: `
		<form class="layui-form" action="" style="padding-top: 16px">
		<div class="layui-form-item">
			<label class="layui-form-label">账号</label>
			<div class="layui-input-inline">
				<input type="text" name="username" required lay-verify="required" placeholder="请输入用户名"
				       autocomplete="off" class="layui-input">
			</div>
			<div class="layui-form-mid layui-word-aux">必填</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">密码</label>
			<div class="layui-input-inline">
				<input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
				       autocomplete="off" class="layui-input">
			</div>
			<div class="layui-form-mid layui-word-aux">必填</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">验证码</label>
			<div class="layui-input-inline">
				<input type="text" name="verifyCode" required lay-verify="required" placeholder="请输入验证码"
				       autocomplete="off" class="layui-input">
			</div>
			<img src="http://192.168.10.29:8080/cas/captchacode"
			     onclick="this.src=this.src+'?date='+new Date().getTime();" style="height: 38px;cursor: pointer"
			     title="看不清楚？点击图片再换一张">
			<!--<div class="layui-form-mid layui-word-aux">看不清楚？点击图片再换一张</div>-->
		</div>
		<div class="layui-form-item">
		    <label class="layui-form-label"></label>
		    <div class="layui-input-block">
		      <input type="checkbox" name="" title="记住密码" lay-skin="primary" checked value="1">
		    </div>
	    </div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="loginCASForm">登录</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
	`
    })
    // 手工渲染全部页面
    layui.form.render()
  }
  //Demo
  layui.use('form', function () {
    var form = layui.form
    //监听提交
    form.on('submit(loginCASForm)', function (data) {
      console.log(data.field)

      return true
    })
  })
</script>
</body>
</html>